<template>
    <router-view v-slot="{ Component }">
        <keep-alive>
            <component :is="Component" />
        </keep-alive>
    </router-view>

    <van-tabbar v-model="active" @change="onChange">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="search">消息</van-tabbar-item>
        <van-tabbar-item icon="friends-o">我的</van-tabbar-item>

    </van-tabbar>
</template>
<script lang="ts" setup>
import router from '@/router/index'
import { ref } from 'vue';
const title = ref('soup')
const active = ref(0);
const onChange = (index: number) => {
    switchTabbars(index)
}

const switchTabbars = (index: number) => {
    switch (index) {
        case 0:
            router.push('/home')
            break;

        case 1:
            router.push('/message')
            break;

        case 2:
            router.push('/mine')
            break;
        default:
            break;
    }

}
</script>
<style lang="scss" scoped>
.van-tabs {
    top: 0;
}
</style>